<!DOCTYPE html>
<html lang="pt">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
	<title>Crossroads</title>
	
	<link rel="stylesheet" href="css/font-face/fonts.css" type="text/css">
	<link rel="stylesheet" href="css/default.css" type="text/css">
	
	<script src="js/jquery-1.6.1.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="js/maps.js" type="javascript"></script>
	
	</head>
	
	<body>
		<div id="wrapper" class="test">
			<div id="content">
				<header>
					<div id="" class="one_col col_margin">
						<div id="brand">
							<a href="javascript:;"><img src="img/crossroads.png" alt="Crossroads - Home" /></a>
						</div>
					</div>
					<div id="menuPrincipal" class="two_col col_margin">
						<nav id="menu">
							<div id="menuItem"><a href="javascrit:;">Amigos</a></div>
							<div id="menuItem"><a href="javascrit:;">Grupos</a></div>
							<div id="menuItem"><a href="javascrit:;">Rotas</a></div>
						</nav>
					</div>
					<div id="" class="two_col col_margin">
					</div>
				</header>
				<section class="">
					<div id="" class="tree_col col_margin">
						<form id="addressForm" action="/">
							<div>
							<label for="address">Address:</label>
							<input type="text" name="address" id="address" />
							<input type="submit" id="addressButton" value="Get Coordinates" />					
							</div>
						</form>
					</div>
					<div id="" class="two_col">
						oi
					</div>
					
					<div id="mapas" class="four_col col_margin">
						<div id="map">
							
						</div>
					</div>
				</section>
				<footer>
					
				</footer>
			</div>
		</div>
	</body>
</html>
<script>
	$(document).ready(function() {
		
		$("#map").getHeight();
			    	
		$("#map").getFriendLocation({
		 'lat' : <?=$lat?>,
		 'lng' : <?=$long?>,
		 'friends' : <?=$friends?>
		});
	});
	(function($) {
		/*PLUGIN DE REDIMENSIONAMENTO DO MAPA PRA ACOMPANHAR LARGURA*/
		jQuery.fn.getHeight = function() {		
			var mapWidth = $(this).width();
			var mapHeight = (mapWidth *9)/16;
			$("#map").height(mapHeight);
			$(window).resize( function() {			
				var mapWidth = $("#map").width();
				var mapHeight = (mapWidth *9)/16;
				$("#map").height(mapHeight);
			});
		};
		
		jQuery.fn.getFriendLocation = function(option) {
			var latlng = new google.maps.LatLng(option.lat, option.lng);
		    var myOptions = {
		      zoom: 15,
		      center: latlng,
		      mapTypeId: google.maps.MapTypeId.ROADMAP
		    };
		    var map = new google.maps.Map(document.getElementById("map"),myOptions);
		    
			var image = '<?=base_url()?>/img/my-marker.png';
		    marker = new google.maps.Marker({
		    	position: latlng,
		    	map: map,		    	
		    	title: 'elemento 1'
		    });  
		    
		    //Adicionar os markers de amigos no mapa
		    addMarker(map, option.friends);
		    
			geocodePosition(latlng);
		    
		    google.maps.event.addListener(map, 'dragend', function() {
		        geocodePosition(map.getCenter());
		    }); 
		    
		    
		    	
		};
		
		
	})(jQuery)
		
</script>



	